<template>
  <el-row>
    <el-col :span="12">
      <el-form-item :label="$t('项目所在地')" prop="projectLocation">
        <el-cascader
          v-model="estateForm.projectLocation"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          :placeholder="$t('项目所在地')"
          @change="handleChange"
        />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item :label="$t('详细地址')" prop="detailedAddress">
        <el-input v-model="estateForm.detailedAddress" :placeholder="$t('详细地址')" show-word-limit maxlength="127" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item :label="$t('物业类型')" prop="propertyType">
        <dict-select
          v-model="estateForm.propertyType"
          dictionary="deal_estate_property_type"
          :placeholder="$t('物业类型')"
        />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item :label="$t('业务类型')" prop="dealBaseEstate.businessType">
        <dict-select
          v-model="estateForm.businessType"
          dictionary="deal_estate_business_type"
          :placeholder="$t('业务类型')"
        />
      </el-form-item>
    </el-col>
  </el-row>
</template>

<script>
import { selectCascaderChina } from '@/api/system/area/sysArea'

export default {
  name: 'DealBaseEstateForm',
  props: {
    estateForm: {
      type: Object,
      default() {
        return {
          projectLocation: undefined,
          detailedAddress: undefined,
          propertyType: undefined,
          businessType: undefined
        }
      }
    }
  },
  data() {
    return {
      options: []
    }
  },
  witch: {
  },
  created() {
    selectCascaderChina({ parentId: 0, name: '中国' }).then(response => {
      console.log(response, '地域')
      if (response.data !== null && response.data.length > 0) {
        this.options = response.data[0].children
      }
    })
  },
  methods: {
    handleChange(data) {
      console.log(data)
    }
  }
}
</script>

<style scoped>

</style>
